﻿
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>梦染-原神抽卡查询</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/layui/layui.js"></script>
</head>
<body>
    <div class="layui-form" action="">
        <div class="demoTable">
            请输入您的抽卡链接：
            <div class="layui-inline">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
            卡池：
            <div class="layui-input-inline">
                <select id="kachi">
                    <option value="">请选择查询池子</option>
                    <option value="200">常驻祈愿</option>
                    <option value="100">新手祈愿</option>
                    <option value="301">角色活动祈愿与角色活动祈愿-2</option>
                    <option value="302">武器活动祈愿</option>
                </select>
            </div>
            <button class="layui-btn" data-type="reload" :loading=loading>搜索</button>
        </div>
    </div>

    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
    <!-- 注意：项目正式环境请勿引用该地址 -->

    <script>

        $('.demoTable .layui-btn').on('click', function () {
            var table = layui.table;
            var demoReload = layui.$('#demoReload').val();
            var yeshu = layui.$('#kachi').val();
            if (demoReload == "" || yeshu == "") {
                layer.msg("请输入查询参数");
            } else {
                //方法级渲染
                table.render({
                    elem: '#LAY_table_user'

                    , url: 'api/chat/chouka'
                    , where: { "we": demoReload, "leixing": yeshu }
                    , cols: [[
                        { field: 'uid', title: '游戏id' }
                        , {
                            field: 'gacha_type', title: '卡池', templet: function (d) {
                                if (d.gacha_type == 100) {
                                    return '新手祈愿池'
                                } else if (d.gacha_type ==200) {
                                    return '常驻祈愿池'
                                } else if (d.gacha_type == 301) {
                                    return '活动祈愿池'
                                } else if (d.gacha_type == 302) {
                                    return '武器祈愿池'
                                } else {
                                    return '活动祈愿池-2'
                                }
                            }
                        }
                        , { field: 'time', title: '抽卡时间' }
                        , { field: 'rank_type', title: '等级' }
                        , { field: 'name', title: '抽中物品' }
                        , { field: 'item_type', title: '物品类别' }
                    ]]
                  , done: function (res, curr, count) {
                        if (res.data.length > 0) {
                            $.each(res.data, function (ii, dd) {
                                if (dd.rank_type) {
                                    if (parseInt(dd.rank_type)==4) {
                                        $($(".layui-table-body.layui-table-main tr")[ii]).css("color", "blue");
                                        $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[ii]).css("color", "blue");
                                    }
                                    if (parseInt(dd.rank_type) == 5) {
                                        $($(".layui-table-body.layui-table-main tr")[ii]).css("color", "red");
                                        $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[ii]).css("color", "red");
                                    }
                                }
                            });
                        }
                    }
                    , id: 'testReload'
                    //加分页功能
                    , page: true
                    , limits: [ 20, 50,500,1000,10000]  //一页选择显示3,5或10条数据
                    , limit: 1000  //一页显示20条数据
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                        var result;
                        console.log(this);
                        console.log(JSON.stringify(res));
                        if (this.page.curr) {
                            result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                        }
                        else {
                            result = res.data.slice(0, this.limit);
                        }
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.count, //解析数据长度
                            "data": result //解析数据列表
                        };
                    }
                });
            }

        });
    </script>
</body>
</html>
